I have a question about @click in vue.

If my component looks like this, it sais this is null:

//testcomponent.vue
<template>
<button @click="variable.someFunction">Click me</button>
</template>

<script>
const default_layout = "default";

export default {
    name: "TestComponent",
    data() {
        return {
            variable: {
                value: "test",
                someFunction() {
                    console.log(this)
                }
            }
        }

    }
}
</script>

If I change the button's code to:

<button @click="variable.someFunction()">Click me</button>

It sais this is:

{
    someFunction: ƒ someFunction()
    value: "test"
}

I couldn't find any documentation on this issue, does anyone know why vue supports both definitions, but have different behaviour?